<!DOCTYPE html>
<html lang="en">

	<head>
		<title>简历-张书梅</title>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="description" content="张书梅的简历">
		<meta name="author" content="zk">
		<meta content="width=device-width,initial-scale=1" name="viewport">
		<link rel="shortcut icon" href="images/favicon.png">
		<link rel="apple-touch-icon" href="images/apple-touch-icon.png">
		<link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png">
		<link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png">
		<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,600,700%7cOswald:400,700" rel="stylesheet">
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
		<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">
		<link rel="stylesheet" type="text/css" href="css/style.css">
		<link rel="stylesheet" type="text/css" href="css/simpletextrotator.css">
		<script src="js/jquery.min.js"></script>
	</head>

	<body>
<div class="music-rotate">
			<img src="images/music-wave.gif" class="music-wave" alt="" style="opacity: 1;">
			<img src="images/music-disc.png" class="music-disc rotate-music" alt="">
			<img src="images/music-head.png" class="music-head" alt="">
		</div>
		<audio src="music/Protect You.mp3" preload="none" loop="loop"></audio>

		<div class="loading-screen"></div>

		<div id="frontpage">
			<div class="shadow-img"></div>
			<img src="images/front-image.jpg" class="front-img img-responsive" alt="Front-image">
			<h1>张书梅</h1>
			<h3 class="invert" style="margin-top: -10px; margin-bottom: 10px;">ui设计师</h3>
			<div class="frontclick"><img src="images/click.png" alt="" class="img-responsive"><span class="pulse"></span></div>
		</div>
		<div class="container">
			<div id="content" class="row hidden">
				<div class="col-sm-4">
					<div id="namecard" class="namecard">
						<div class="shadow-img"></div>
						<h1 class="maintitle">张书梅</h1>
						<h3 class="invert sub-maintitle">ui设计师</h3>
						<img id="profile-img" class="profile-img transparent" src="images/profile-thum.png" alt="profile-image">
					</div>
					<div id="menu-container">
						<ul class="nav-menu no-padding">
							<li class="nav-btn selected" title="Home" data-page="home">
								<div class="hover-background"></div>
								<span>首页</span><i class="fa fa-user fa-fw"></i>
							</li>
							<li class="nav-btn" id="resume-btn" title="Resume" data-page="resume">
								<div class="hover-background"></div>
								<span>简历</span><i class="fa fa-file-text fa-fw"></i>
							</li>
							<li class="nav-btn folio-btn" data-filter="*" title="Portfolio" data-page="portfolio">
								<div class="hover-background"></div>
								<span>项目案例</span><i class="fa fa-suitcase fa-fw"></i>
							</li>
							<li class="nav-btn" title="Contact" id="contact-link" data-page="contact">
								<div class="hover-background"></div>
								<span>联系我</span><i class="fa fa-paper-plane fa-fw"></i>
							</li>
						</ul>
					</div>
				</div>
				<div class="col-sm-8 page-segment">
					<ul class="page-container no-padding">
						<li id="home" class="selected">
							<div class="title-container hidden">
								<div class="shadow-img"></div>
								<h2 class="rotate-out">欢迎来到<span class="invert">我的简历</span></h2>
							</div>
							<div class="description hidden">
								<div class="watermark-home"></div>
								<div class="fade-text transparent">
									<div class="focus-text"><span>ui设计师</span></div>
									<p class="large-paragraph">本人熟练使用Photoshop、 Illustrator、Axure、 Fireworks、Flash等设计软件 
。熟悉网站和APP的制作流程，能独立完成项目
。精通ios和android手机app的ui设计规范和流程，并有app的设计经验，能够独立完成任务
。对视觉设计、色彩有敏锐的观察力，良好的设计表现力 
。熟悉HTML和CSS的结构。
									</p>
								</div>
								<h3 class="personal-info-title title">个人信息</h3>
								<ul class="personal-info">
									<li class="rotate-out rotated"><label>姓名</label><span>张书梅</span></li>
									<li class="rotate-out rotated"><label>户籍</label><span>广东河源</span></li>
									<li class="rotate-out rotated"><label>邮箱</label><span>13642491536@163.com</span></li>
									<li class="rotate-out rotated"><label>电话</label><span>13642491536</span></li>
								</ul>
							</div>
						</li>

						<li id="resume" class="hidden">
							<div class="title-container">
								<div class="shadow-img"></div>
								<h2 class="rotate-out rotated">简历</h2>
							</div>
							<div class="description">
								<div class='tabs tabs_animate'>
									<ul class='horizontal no-padding'>
										<li>
											<a href="#tab-1" class="icon-bg icon-skills">
												<div>技能</div>
											</a>
										</li>
										<li>
											<a href="#tab-3" class="icon-bg icon-employment">
												<div>工作经历</div>
											</a>
										</li>
									</ul>
									<div id='tab-1'>
										<h3 class="title">我的技能</h3>
										<ul class="skills-list no-padding">
											<li class="row">
												<div class="col-xs-2">
													<div class="fw-mid">PS</div>
												</div>
												<div class="col-xs-9">
													<div class="bar">
														<div class="percentage" id="bar1" style="width: 90%;"></div>
													</div>
												</div>
											</li>
											<li class="row">
												<div class="col-xs-2">
													<div class="fw-mid">AI</div>
												</div>
												<div class="col-xs-9">
													<div class="bar">
														<div class="percentage" id="bar2" style="width: 70%;"></div>
													</div>
												</div>
											</li>
											<li class="row">
												<div class="col-xs-2">
													<div class="fw-mid">CDR</div>
												</div>
												<div class="col-xs-9">
													<div class="bar">
														<div class="percentage" id="bar3" style="width: 50%;"></div>
													</div>
												</div>
											</li>
										</ul>
										<div class="circle-skill-container">
											<h3 class="title">其他技能</h3>
											<div class="row">
												<div class="col-xs-4 center-align">
													<div class="circle-bar" id="line-container1">
														<div class="progressbar-text" id="progress-text1">0</div>
													</div>
													<h5>JAVA</h5>
												</div>
												<div class="col-xs-4 center-align">
													<div class="circle-bar" id="line-container2">
														<div class="progressbar-text" id="progress-text2">0</div>
													</div>
													<h5>Linux</h5>
												</div>
												<div class="col-xs-4 center-align">
													<div class="circle-bar" id="line-container3">
														<div class="progressbar-text" id="progress-text3">0</div>
													</div>
													<h5>MySQL</h5>
												</div>
											</div>
										</div>
									</div>
									<div id='tab-3'>
										<h3 class="title">工作经历</h3>
										<ul class="employment-class tab-cont">
											<li>
												<h4>UI设计师 <span class="year">2016.8 - 2017.3</span></h4>
												<h5>东莞市掌商信息科技有限公司</h5>
												<p>负责APP界面视觉设计和企业网站制作，和同事积极沟通，促进界面及交互设计的实现，并配合完成产品的后期制作、切图和标注</p>
											</li>
											<li>
												<h4>UI设计师<span class="year">2017.4 - 至今</span></h4>
												<h5>东莞市牛咖信息技术有限公司</h5>
												<p>负责APP界面视觉设计和企业网站制作，和同事积极沟通，促进界面及交互设计的实现，并配合完成产品的后期制作、切图和标注</p>
											</li>
										</ul>
									</div>
								</div>
							</div>
						</li>
						<li id="portfolio" class="hidden">
							<div class="title-container">
								<div class="shadow-img"></div>
								<h2 class="rotate-out rotated">项目案例</h2>
							</div>
							<div class="sec-porfolio description">
								<div class="row">
									<div class="folio-container">
										<ul class="folio-item">
											<li class="view view-first">
												<img src="images/folio/wcjy.png" alt="丰盟汇" />
												<div class="mask"></div>
												<div class="content">
													<h2>丰盟汇</h2>
													<a role="button" class="info" data-toggle="modal" data-target="#myModal1">更多</a>
												</div>
											</li>
											<li class="view view-first">
												<img src="images/folio/ddm.png" alt="带动美" />
												<div class="mask">
													<h2>带动美</h2>
													<a role="button" class="info" data-toggle="modal" data-target="#myModal2">更多</a>
												</div>
											</li>
											<li class="view view-first">
												<img src="images/folio/jxh.png" alt="家学会" />
												<div class="mask"></div>
												<div class="content">
													<h2>家学会</h2>
													<a role="button" class="info" data-toggle="modal" data-target="#myModal3">更多</a>
												</div>
											</li>
											<li class="view view-first">
												<img src="images/folio/cf.png" alt="触房" style="height: auto;margin-top: 40px;" />
												<div class="mask"></div>
												<div class="content">
													<h2>触房</h2>
													<a role="button" class="info" data-toggle="modal" data-target="#myModal4">更多</a>
												</div>
											</li>
											<li class="view view-first">
												<img src="images/folio/jb.png" alt="结霸" />
												<div class="mask"></div>
												<div class="content">
													<h2>结霸</h2>
													<a role="button" class="info" data-toggle="modal" data-target="#myModal5">更多</a>
												</div>
											</li>
											<li class="view view-first">
												<img src="images/folio/zswl.png" alt="浙商物流" />
												<div class="mask"></div>
												<div class="content">
													<h2>浙商物流</h2>
													<a role="button" class="info" data-toggle="modal" data-target="#myModal6">更多</a>
												</div>
											</li>
											<li class="view view-first">
												<img src="images/folio/xy.png" alt="学苑" />
												<div class="mask"></div>
												<div class="content">
													<h2>学院</h2>
													<a role="button" class="info" data-toggle="modal" data-target="#myModal7">更多</a>
												</div>
											</li>
											<li class="view view-first">
												<img src="images/folio/nk.png" alt="牛咖官网" />
												<div class="mask"></div>
												<div class="content">
													<h2>牛咖官网</h2>
													<a role="button" class="info" data-toggle="modal" data-target="#myModal8">更多</a>
												</div>
											</li>
										</ul>
									</div>
								</div>
							</div>
						</li>
						<li id="contact" class="hidden">
							<div class="title-container">
								<div class="shadow-img"></div>
								<h2 class="rotate-out rotated">联系我</h2>
							</div>
							<div class="description">
								<div class="row">
									<div class="col-sm-6">
										<h3 class="title">联系方式</h3>
										<h5 class="sm-title"><span class="address-icon"><i class="fa fa-phone"></i></span>电话：13642491536</h6>
								<h5 class="sm-title"><span class="address-icon"><i class="fa fa-qq"></i></span>Q Q：974157610</h6>
								<h5 class="sm-title"><span class="address-icon"><i class="fa fa-weixin"></i></span>微信：13642491536</h6>
								<h5 class="sm-title"><span class="address-icon"><i class="fa fa-envelope"></i></span>邮箱：13642491536@163.com</h6>
							</div>
						</div>
					</div>
				</li>
			</ul> 
		</div>
	</div>
</div>
<div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
				<h4 class="modal-title" id="myModalLabel">带动美</h4>
			</div>
			<div class="modal-body">
				<img src="images/qrcode/ddm.png" class="img-responsive" alt="二维码" style="margin: 0 auto;">
				<div class="qrcode-prompt">扫描二维码体验</div>
			</div>
			<div class="modal-footer">
				<div class="mf-content">
					<p>带动美APP是一款综合美容服务应用平台，平台提供了大量高品质的品牌美容产品，天然植物精华单品、品质认证组合套装，均为厂家直销，价格优惠，是选购美容护肤产品的首先平台。平台还有丽人社区可以进行美容护肤方面的便捷交流，为广大美容顾客提供线上预约，线下服务的便捷o2o服务。</p>
				</div>
			</div>
			<div class="modal-footer">
				<div class="mf-content">
					<p>我的职责：负责ui页面视觉设计与后期切图标注。</p>
				</div>
			</div>
		</div>
	</div>
</div>
<div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
				<h4 class="modal-title" id="myModalLabel">丰盟汇</h4>
			</div>
			<div class="modal-body">
				<img src="images/qrcode/fmh.png" class="img-responsive" alt="二维码" style="margin: 0 auto;">
				<div class="qrcode-prompt">扫描二维码体验</div>
			</div>
			<div class="modal-footer">
				<div class="mf-content">
					<p>丰盟汇商城是广东丰盟汇实业发展股份有限公司旗下的B2B2C电商平台，以创新的联盟模式打造更专业、更全面的电商服务平台。</p>
				</div>
			</div>
			<div class="modal-footer">
				<div class="mf-content">
					<p>我的职责：负责ui页面视觉设计与后期切图标注。</p>
				</div>
			</div>
		</div>
	</div>
</div>
<div class="modal fade" id="myModal3" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
				<h4 class="modal-title" id="myModalLabel">家学会</h4>
			</div>
			<div class="modal-body">
				<img src="images/qrcode/jxh.png" class="img-responsive" alt="二维码" style="margin: 0 auto;">
				<div class="qrcode-prompt">扫描二维码体验</div>
			</div>
			<div class="modal-footer">
				<div class="mf-content">
					<p>家学会APP是一个全新的家庭教育学习平台，让家长学会了解孩子，学会读懂孩子，学会了解自己、学会改变自己，与孩子共同成长。</p>
				</div>
			</div>
			<div class="modal-footer">
				<div class="mf-content">
					<p>我的职责：负责ui页面视觉设计与后期切图标注。</p>
				</div>
			</div>
		</div>
	</div>
</div>
<div class="modal fade" id="myModal4" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
				<h4 class="modal-title" id="myModalLabel">触房</h4>
			</div>
			<div class="modal-body">
				<div class="qrcode-prompt">链接地址：<a href="http://chufang720.com" target="_blank">http://chufang720.com</a></div>
			</div>
			<div class="modal-footer">
				<div class="mf-content">
					<p>触房是一个HTML5快速编辑生成网站，开发商无需掌握复杂的前端代码修改，通过可视化 模版DIY制作网页设计，快速生成页面和推广。</p>
				</div>
			</div>
			<div class="modal-footer">
				<div class="mf-content">
					<p>我的职责：负责ui页面视觉设计与后期切图标注。</p>
				</div>
			</div>
		</div>
	</div>
</div>
<div class="modal fade" id="myModal5" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
				<h4 class="modal-title" id="myModalLabel">结霸</h4>
			</div>
			<div class="modal-body">
				<img src="images/qrcode/jb.png" class="img-responsive" alt="二维码" style="margin: 0 auto;">
				<div class="qrcode-prompt">扫描二维码体验</div>
			</div>
			<div class="modal-footer">
				<div class="mf-content">
					<p>结霸app是一款为福建君辉建材有限公司打造的在线购买其结霸防水材料的软件，涵盖了防水管材、防水工具等等海量的防水用品，用户可以在线选购，配送到家，十分便捷。</p>
				</div>
			</div>
			<div class="modal-footer">
				<div class="mf-content">
					<p>我的职责：负责ui页面视觉设计与后期切图标注。</p>
				</div>
			</div>
		</div>
	</div>
</div>
<div class="modal fade" id="myModal6" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
				<h4 class="modal-title" id="myModalLabel">浙商物流</h4>
			</div>
			<div class="modal-body">
				<img src="images/qrcode/zswl.png" class="img-responsive" alt="二维码" style="margin: 0 auto;">
				<div class="qrcode-prompt">扫描二维码体验</div>
			</div>
			<div class="modal-footer">
				<div class="mf-content">
					<p>浙商物流APP提供快递员端和会员端，会员端可以线上寄件、代收货款，为用户提供编辑的物流服务。</p>
				</div>
			</div>
			<div class="modal-footer">
				<div class="mf-content">
					<p>我的职责：负责ui页面视觉设计与后期切图标注。</p>
				</div>
			</div>
		</div>
	</div>
</div>
<div class="modal fade" id="myModal7" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
				<h4 class="modal-title" id="myModalLabel">学苑</h4>
			</div>
			<div class="modal-body">
				<img src="images/qrcode/xy.png" class="img-responsive" alt="二维码" style="margin: 0 auto;">
				<div class="qrcode-prompt">扫描二维码体验</div>
			</div>
			<div class="modal-footer">
				<div class="mf-content">
					<p>三级分销平台是一个基于微信开发的商城、分销商可分享推广发展下线获取佣金，分简易版和精装版两个版本。</p>
				</div>
			</div>
			<div class="modal-footer">
				<div class="mf-content">
					<p>我的职责：负责前端页面开发及接口对接。</p>
				</div>
			</div>
		</div>
	</div>
</div>
<div class="modal fade" id="myModal8" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
				<h4 class="modal-title" id="myModalLabel">营销插件平台</h4>
			</div>
			<div class="modal-body">
				<img src="images/folio/plugin.png" class="img-responsive" alt="摇一摇" style="display: inline;width: 30%;">
				<img src="images/folio/plugin1.png" class="img-responsive" alt="刮刮乐" style="display: inline;width: 30%;">
				<img src="images/folio/plugin2.png" class="img-responsive" alt="微助力" style="display: inline;width: 30%;">
			</div>
			<div class="modal-footer">
				<div class="mf-content">
					<p>营销插件平台是一个基于微信开发的提供用户做微信营销的平台，其中目前包含了26个微应用（微砍价、接粽子、微投票、大转盘、刮刮乐、摇一摇等等）</p>
				</div>
			</div>
			<div class="modal-footer">
				<div class="mf-content">
					<p>我的职责：负责ui页面视觉设计与后期切图标注。</p>
				</div>
			</div>
		</div>
	</div>
</div>
<script type="text/javascript" src="js/jQueryTween-aio-min.js"></script>
<script type="text/javascript" src="js/jquery.tabslet.min.js"></script> 
<script type="text/javascript" src="js/progressbar.min.js"></script>
<script type="text/javascript" src="js/jquery.simple-text-rotator.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src='js/isotope.pkgd.min.js'></script>
<script type="text/javascript" src="js/custom.js"></script>
</body>
</html>